<template>
    <van-nav-bar title="我的">
    </van-nav-bar>
    <div class="box">
        <div class="topbox">
            <div class="left">我的订单</div>
            <div class="right" @click="btn">查看全部订单 &gt </div>
        </div>
        <div class="rightbox">
            <van-grid column-num="5" :border=false>
                <van-grid-item icon="balance-pay" text="待付款" @click="" icon-color="#FF5687" />
                <van-grid-item icon="description" text="待开补款" icon-color="#FF5687" />
                <van-grid-item icon="logistics" text="待收货" icon-color="#FF5687" />
                <van-grid-item icon="records" text="待评价" icon-color="#FF5687" />
                <van-grid-item icon="cash-back-record" text="退换/售后" icon-color="#FF5687" />
            </van-grid>
        </div>
    </div>
    <div class="bigbox">
        <div class="upone">
            常用功能
        </div>
        <div class="unone">
            <van-grid :column-num="4">
                <van-grid-item v-for="(value, index) in styleList" :key="value" :icon=value.icon :text=value.text
                    icon-color="#FF5687" :num=index @click="thebtn(index)" />
            </van-grid>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useUserInfoStore } from '@/stores/useInfo';
import { showToast } from 'vant';

const store = useUserInfoStore()
const usetoken = store.getUserToken
const thebtn = (index: any) => {
    if (index === 15) {
        router.push('/set')
    } else if (index === 0) {
        if (usetoken) {
            router.push('/addres')
        } else {
            router.push('/login')
        }
    }
}
const router = useRouter()
const btn = async () => {
    if (usetoken) {
        router.push('/allorder')
    } else {
        showToast({
            message: '登录查看您的订单',
            position: 'middle'
        })
    }
}
const styleList: Array<any> = [
    { icon: 'wap-home-o', text: '地址管理' },
    { icon: 'label-o', text: '购买人信息' },
    { icon: 'coupon-o', text: '电子票' },
    { icon: 'comment-circle-o', text: '建议反馈' },
    { icon: 'smile-o', text: '在线客服' },
    { icon: 'shop-o', text: '盲盒' },
    { icon: 'music-o', text: '异想少女' },
    { icon: 'goods-collect-o', text: '福利站' },
    { icon: 'desktop-o', text: '原创大赛' },
    { icon: 'flower-o', text: '工房集市' },
    { icon: 'notes-o', text: '服务单' },
    { icon: 'medal-o', text: '特权勋章' },
    { icon: 'gift-card-o', text: '异想空间' },
    { icon: 'comment-o', text: '平台资质' },
    { icon: 'cluster-o', text: '造物LAB' },
    { icon: 'setting-o', text: '设置' },
]

</script>



<style lang="scss" scoped>
.box {
    height: 100px;
    width: 98%;
    margin: 10px auto;
    border-radius: 20px;

    .topbox {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;

        .left {
            font-size: 14px;
            font-weight: 900;
        }
    }
}

.bigbox {
    height: 100%;
    width: 100%;

    .upone {
        margin-top: 10px;
        font-size: 14px;
        font-weight: 900;
        padding-left: 10px;
    }
}
</style>